<template>
  <div class="edit-dialog">
    <el-dialog
      v-model="dialog"
      title="平台详情"
      :visible.sync="dialog"
      :close-on-click-modal="false"
      :show-close="true"
      width="550px"
      center
      @close="handleClose"
    >
      <div class="content">
        <el-form class="el-form" :model="detailFormData" label-position="right" label-width="70px">
          <!--<el-form-item label="设备ID">{{detailFormData.platformId}}</el-form-item>-->
          <el-form-item label="平台名称">{{detailFormData.name}}</el-form-item>
          <!--<el-form-item label="平台别名">{{detailFormData.displayName}}</el-form-item>-->
          <el-form-item label="平台类型">{{detailFormData.type}}</el-form-item>
          <el-form-item label="建筑类型">
            <span v-if="detailFormData.buildType == 'HOSPITAL'">医院</span>
            <span v-if="detailFormData.buildType == 'OFFICE'">办公楼</span>
          </el-form-item>
          <el-form-item label="平台描述">
            <div class="desc">{{detailFormData.description}}</div>
          </el-form-item>
          <el-form-item label="创建时间">{{detailFormData.createTime | dateFormat}}</el-form-item>
          <el-form-item label="更新时间">{{detailFormData.updateTime | dateFormat}}</el-form-item>
          <el-form-item label="LOGO">
            <img v-if="logo != ''" :src="logo" style="width: 80px; height: 50px;"/>
          </el-form-item>
          <!--<el-form-item style="text-align: center">
            <el-button type="default" icon="el-icon-back" @click="goBack">返 回</el-button>
          </el-form-item>-->
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get } from "@/api/platformManage";
import { getImg } from "@/api/common";
import { formatDate } from "@/utils/utils";

export default {
  name: "detail",
  props:{
    showDialog:{
      type:Boolean,
      default:false
    },
    platformId:{
      type:String,
      default: ""
    }
  },
  data() {
    return {
      detailFormData: {},
      imageUrl: "",
      logo: ""
    };
  },
  watch: {
    dialog(newVal) {
      if (!newVal) {
        this.detailFormData = {};
        this.imageUrl = "";
        this.logo = "";
      } else {
        if (newVal != "") {
          this.getDetail();
        }
      }
    }
  },
  computed: {
    dialog: {
      get() {
        return this.showDialog;
      },
      set() {}
    }
  },
  filters: {
    dateFormat(column) {
      return formatDate(new Date(column));
    }
  },
  mounted(){

  },
  methods: {
    getDetail() {
      const that = this;
      let data = {
        platformId: this.platformId
      };
      get(data).then(res => {
        if (res["code"] == 200) {
          that.detailFormData = res.value;
          if (res.value.logoImage != null) {
            let data = {
              key: res.value.logoImage
            };
            getImg(data).then(res => {
              if (res["code"] == 200) {
                that.logo = res.value;
              }
            });
          }
        }
      });
    },
    // 取消事件
    handleClose() {
      this.$emit('changeVisible', false)
    }
  }
};
</script>

<style scoped>
.el-form {
  /*width: 90%;
  margin: 20px;*/
}
.el-form-item {
  margin-bottom: 10px;
}
</style>
<style lang="scss" scoped>
  .desc {
    max-height: 80px;
    overflow-y: auto;
    line-height: 36px;
  }
</style>
